import Vue from 'vue'
import App from './App.vue'
import router from './router' // Router is restored
import store from './store'   // Restore store import
import './assets/scss/main.scss'; // Import global styles

// Font Awesome Icons
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons'; // Import all solid icons
import { far } from '@fortawesome/free-regular-svg-icons'; // Import all regular icons
import { fab } from '@fortawesome/free-brands-svg-icons'; // Import all brand icons
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas, far, fab); // Add all imported collections to the library
Vue.component('font-awesome-icon', FontAwesomeIcon); // Register component globally

Vue.config.productionTip = false

// Vue.config.performance = true; // Uncomment for performance profiling in development

// Custom directive for focusing the first focusable element in a container
Vue.directive('focus-on-show', {
  inserted: function (el, binding) {
    if (binding.value) {
      const focusable = el.querySelector(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      if (focusable) {
        focusable.focus();
      }
    }
  },
  componentUpdated: function (el, binding) {
    if (binding.value && !binding.oldValue) {
      const focusable = el.querySelector(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      if (focusable) {
        // console.log('Focusing on show:', focusable);
        focusable.focus();
      }
    }
  },
});

new Vue({
  router, // Router is restored
  store,  // Restore store usage
  render: h => h(App)
}).$mount('#app') 